<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件格式转换工具</title>
    <link href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 600;
        }
        .header p {
            margin-top: 10px;
            font-size: 1.1em;
            opacity: 0.9;
        }
        .content {
            padding: 30px;
        }
        .tabs {
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 20px;
        }
        .tab-button {
            padding: 15px 30px;
            border: none;
            background: none;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            color: #666;
        }
        .tab-button.active {
            color: #1890ff;
            font-weight: 500;
        }
        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #1890ff;
        }
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        .tab-content.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .upload-container {
            border: 2px dashed #d9d9d9;
            border-radius: 8px;
            padding: 60px 20px;
            text-align: center;
            transition: all 0.3s ease;
            background: #fafafa;
            margin: 20px 0;
        }
        .upload-container:hover {
            border-color: #40a9ff;
            background: #e6f7ff;
        }
        .upload-icon {
            font-size: 48px;
            color: #999;
            margin-bottom: 16px;
        }
        .upload-text {
            color: #666;
            font-size: 16px;
            margin-bottom: 8px;
        }
        .upload-hint {
            color: #999;
            font-size: 14px;
        }
        .file-input {
            display: none;
        }
        .upload-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
        }
        .upload-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .upload-button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        .progress-container {
            margin-top: 20px;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 10px;
            transition: width 0.3s ease;
            position: relative;
        }
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #333;
            font-weight: 500;
        }
        .result-container {
            margin-top: 20px;
            padding: 20px;
            background: #f0f8ff;
            border-radius: 8px;
            border-left: 4px solid #1890ff;
        }
        .image-preview {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .preview-item {
            text-align: center;
        }
        .preview-image {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .preview-info {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .textarea-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        textarea {
            width: 100%;
            height: 400px;
            padding: 15px;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            resize: none;
            transition: border-color 0.3s ease;
        }
        textarea:focus {
            outline: none;
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .textarea-label {
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }
        .compress-options {
            margin: 20px 0;
            padding: 20px;
            background: #fafafa;
            border-radius: 8px;
        }
        .option-group {
            margin-bottom: 15px;
        }
        .option-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        select, input[type="range"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        .range-value {
            margin-left: 10px;
            color: #1890ff;
            font-weight: 500;
        }
        .error-message {
            color: #ff4d4f;
            background: #fff2f0;
            padding: 10px 15px;
            border-radius: 4px;
            margin-top: 15px;
            border-left: 4px solid #ff4d4f;
        }
        .success-message {
            color: #52c41a;
            background: #f6ffed;
            padding: 10px 15px;
            border-radius: 4px;
            margin-top: 15px;
            border-left: 4px solid #52c41a;
        }
        @media (max-width: 768px) {
            .container {
                margin: 10px;
            }
            .header h1 {
                font-size: 2em;
            }
            .content {
                padding: 20px;
            }
            .tab-button {
                padding: 10px 20px;
                font-size: 1em;
            }
            .textarea-container {
                grid-template-columns: 1fr;
            }
            textarea {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>文件格式转换工具</h1>
            <p>在线转换文件格式，无需安装软件</p>
        </div>
        
        <div class="content">
            <div class="tabs">
                <button class="tab-button active" onclick="switchTab('pdf-to-word')">PDF 转 Word</button>
                <button class="tab-button" onclick="switchTab('image-compress')">图片压缩</button>
                <button class="tab-button" onclick="switchTab('markdown-to-html')">Markdown 转 HTML</button>
            </div>
            
            <!-- PDF 转 Word -->
            <div id="pdf-to-word" class="tab-content active">
                <h2 style="color: #333; margin-bottom: 20px;">PDF 转 Word</h2>
                <div class="upload-container">
                    <div class="upload-icon">📄</div>
                    <div class="upload-text">拖拽 PDF 文件到此处，或点击选择文件</div>
                    <div class="upload-hint">支持最大 100MB 的 PDF 文件</div>
                    <input type="file" id="pdf-file" accept=".pdf" class="file-input">
                    <button class="upload-button" onclick="document.getElementById('pdf-file').click()">选择 PDF 文件</button>
                </div>
                <div id="pdf-result" style="display: none;">
                    <div class="progress-container" id="pdf-progress-container" style="display: none;">
                        <div class="progress-bar">
                            <div class="progress-fill" id="pdf-progress-fill" style="width: 0%;">
                                <span class="progress-text" id="pdf-progress-text">0%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 图片压缩 -->
            <div id="image-compress" class="tab-content">
                <h2 style="color: #333; margin-bottom: 20px;">图片压缩</h2>
                <div class="upload-container">
                    <div class="upload-icon">🖼️</div>
                    <div class="upload-text">拖拽图片文件到此处，或点击选择文件</div>
                    <div class="upload-hint">支持 JPG、PNG、WebP 格式，最大 10MB</div>
                    <input type="file" id="image-files" accept="image/*" multiple class="file-input">
                    <button class="upload-button" onclick="document.getElementById('image-files').click()">选择图片文件</button>
                </div>
                
                <div class="compress-options" id="compress-options" style="display: none;">
                    <div class="option-group">
                        <label class="option-label">输出格式</label>
                        <select id="output-format">
                            <option value="auto">自动（保持原格式）</option>
                            <option value="jpeg">JPEG</option>
                            <option value="webp">WebP（推荐）</option>
                            <option value="png">PNG</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">质量设置
                            <span class="range-value" id="quality-value">80</span>
                        </label>
                        <input type="range" id="quality-slider" min="10" max="100" value="80" oninput="document.getElementById('quality-value').textContent = this.value">
                    </div>
                    <button class="upload-button" onclick="compressImages()">开始压缩</button>
                </div>
                
                <div id="image-preview" class="image-preview" style="display: none;"></div>
            </div>
            
            <!-- Markdown 转 HTML -->
            <div id="markdown-to-html" class="tab-content">
                <h2 style="color: #333; margin-bottom: 20px;">Markdown 转 HTML</h2>
                <div class="textarea-container">
                    <div>
                        <div class="textarea-label">Markdown 输入</div>
                        <textarea id="markdown-input" placeholder="在此输入 Markdown 内容..."># 示例 Markdown

## 二级标题

这是一个**粗体**文本和*斜体*文本。

### 列表
- 项目 1
- 项目 2
- 项目 3

### 代码块
```python
print("Hello, World!")
```

### 链接和图片
[百度](https://www.baidu.com)

### 引用
> 这是一段引用文本。

### 表格
| 姓名 | 年龄 | 城市 |
|------|------|------|
| 张三 | 25   | 北京 |
| 李四 | 30   | 上海 |</textarea>
                    </div>
                    <div>
                        <div class="textarea-label">HTML 输出</div>
                        <textarea id="html-output" readonly placeholder="HTML 结果将显示在这里..."></textarea>
                    </div>
                </div>
                <div style="margin-top: 20px; text-align: center;">
                    <button class="upload-button" onclick="convertMarkdown()">转换 Markdown</button>
                    <button class="upload-button" style="margin-left: 10px; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);" onclick="copyHtmlOutput()">复制 HTML</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 切换标签页
        function switchTab(tabId) {
            // 隐藏所有内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            // 移除所有按钮的激活状态
            document.querySelectorAll('.tab-button').forEach(button => {
                button.classList.remove('active');
            });
            // 显示选中的内容
            document.getElementById(tabId).classList.add('active');
            // 激活选中的按钮
            event.target.classList.add('active');
            
            // 如果切换到Markdown标签，自动转换示例内容
            if (tabId === 'markdown-to-html') {
                convertMarkdown();
            }
        }
        
        // PDF 转 Word 功能
        document.getElementById('pdf-file').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            // 检查文件大小（100MB）
            if (file.size > 100 * 1024 * 1024) {
                showError('文件大小超过限制（100MB）');
                return;
            }
            
            // 检查文件类型
            if (!file.type.includes('pdf')) {
                showError('请上传 PDF 文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            
            // 显示进度条
            const resultContainer = document.getElementById('pdf-result');
            const progressContainer = document.getElementById('pdf-progress-container');
            const progressFill = document.getElementById('pdf-progress-fill');
            const progressText = document.getElementById('pdf-progress-text');
            
            resultContainer.style.display = 'block';
            progressContainer.style.display = 'block';
            progressFill.style.width = '0%';
            progressText.textContent = '0%';
            
            // 清空之前的结果
            while (resultContainer.firstChild) {
                if (resultContainer.firstChild === progressContainer) break;
                resultContainer.removeChild(resultContainer.firstChild);
            }
            
            // 模拟进度更新
            let progress = 0;
            const progressInterval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress > 90) progress = 90;
                progressFill.style.width = progress + '%';
                progressText.textContent = Math.floor(progress) + '%';
            }, 500);
            
            // 发送请求到后端
            fetch('http://localhost:8000/api/pdf-to-word', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                clearInterval(progressInterval);
                
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || '转换失败');
                    }).catch(() => {
                        throw new Error('转换失败，请稍后重试');
                    });
                }
                
                progressFill.style.width = '100%';
                progressText.textContent = '100%';
                
                // 获取文件名
                const contentDisposition = response.headers.get('content-disposition');
                let filename = 'converted.docx';
                if (contentDisposition) {
                    const matches = /filename="([^"]+)"/.exec(contentDisposition);
                    if (matches && matches[1]) {
                        filename = matches[1];
                    }
                }
                
                return response.blob().then(blob => {
                    // 创建下载链接
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = filename;
                    
                    // 创建成功消息
                    const successMessage = document.createElement('div');
                    successMessage.className = 'success-message';
                    successMessage.innerHTML = `
                        <p>✅ PDF 转 Word 成功！</p>
                        <p>点击下方按钮下载转换后的文件：</p>
                    `;
                    
                    const downloadButton = document.createElement('button');
                    downloadButton.className = 'upload-button';
                    downloadButton.innerText = '下载 Word 文件';
                    downloadButton.onclick = () => a.click();
                    
                    successMessage.appendChild(downloadButton);
                    resultContainer.insertBefore(successMessage, progressContainer);
                    
                    // 自动触发下载
                    setTimeout(() => {
                        a.click();
                        window.URL.revokeObjectURL(url);
                    }, 1000);
                });
            })
            .catch(error => {
                clearInterval(progressInterval);
                // 如果是网络错误，说明后端服务未启动，提供提示
                if (error.message.includes('Failed to fetch') || error.message.includes('网络错误')) {
                    showError('后端服务未启动。请先运行 Python 后端服务，然后再尝试转换。');
                } else {
                    showError(error.message);
                }
            });
        });
        
        // 图片压缩功能
        document.getElementById('image-files').addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length === 0) return;
            
            // 检查文件数量
            if (files.length > 10) {
                showError('一次最多只能上传 10 张图片');
                return;
            }
            
            // 检查文件类型和大小
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.startsWith('image/')) {
                    showError(`文件 ${file.name} 不是有效的图片文件`);
                    return;
                }
                if (file.size > 10 * 1024 * 1024) {
                    showError(`图片 ${file.name} 大小超过 10MB`);
                    return;
                }
            }
            
            // 显示压缩选项
            document.getElementById('compress-options').style.display = 'block';
            
            // 存储文件以便后续压缩
            window.selectedImageFiles = files;
        });
        
        // 压缩图片
        async function compressImages() {
            if (!window.selectedImageFiles || window.selectedImageFiles.length === 0) {
                showError('请先选择要压缩的图片');
                return;
            }
            
            const quality = parseInt(document.getElementById('quality-slider').value) / 100;
            const outputFormat = document.getElementById('output-format').value;
            const previewContainer = document.getElementById('image-preview');
            
            previewContainer.innerHTML = '';
            previewContainer.style.display = 'grid';
            
            // 为每个图片创建预览和下载选项
            for (let i = 0; i < window.selectedImageFiles.length; i++) {
                const file = window.selectedImageFiles[i];
                const originalSize = (file.size / 1024).toFixed(2);
                
                // 创建预览项
                const previewItem = document.createElement('div');
                previewItem.className = 'preview-item';
                
                // 创建图片预览
                const img = document.createElement('img');
                img.className = 'preview-image';
                img.file = file;
                
                // 读取原图
                const reader = new FileReader();
                reader.onload = (function(aImg, fileName) {
                    return function(e) {
                        aImg.src = e.target.result;
                        
                        // 压缩图片
                        compressImageDataUrl(e.target.result, quality, outputFormat, fileName).then(compressedData => {
                            // 更新预览图
                            aImg.src = compressedData.dataUrl;
                            
                            // 显示压缩信息
                            const infoDiv = document.createElement('div');
                            infoDiv.className = 'preview-info';
                            infoDiv.innerHTML = `
                                <p>原图: ${originalSize} KB</p>
                                <p>压缩后: ${compressedData.sizeKb} KB</p>
                                <p>压缩率: ${compressedData.ratio}%</p>
                            `;
                            
                            // 创建下载按钮
                            const downloadBtn = document.createElement('button');
                            downloadBtn.className = 'upload-button';
                            downloadBtn.style.padding = '8px 16px';
                            downloadBtn.style.fontSize = '14px';
                            downloadBtn.innerText = '下载';
                            downloadBtn.onclick = () => {
                                downloadCompressedImage(compressedData.dataUrl, fileName, compressedData.format);
                            };
                            
                            infoDiv.appendChild(downloadBtn);
                            previewItem.appendChild(infoDiv);
                        });
                    };
                })(img, file.name);
                
                reader.readAsDataURL(file);
                previewItem.appendChild(img);
                previewContainer.appendChild(previewItem);
            }
            
            showSuccess(`已成功压缩 ${window.selectedImageFiles.length} 张图片`);
        }
        
        // 压缩图片的核心函数
        function compressImageDataUrl(dataUrl, quality, outputFormat, originalFileName) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = function() {
                    // 创建 canvas
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;
                    
                    // 保持宽高比
                    const maxWidth = 2000;
                    if (width > maxWidth) {
                        const ratio = maxWidth / width;
                        width = maxWidth;
                        height = height * ratio;
                    }
                    
                    canvas.width = width;
                    canvas.height = height;
                    
                    // 绘制图片
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    // 确定输出格式
                    let mimeType = 'image/jpeg';
                    if (outputFormat === 'auto') {
                        // 自动根据原图格式决定
                        mimeType = dataUrl.split(';')[0].split(':')[1];
                    } else if (outputFormat === 'webp') {
                        mimeType = 'image/webp';
                    } else if (outputFormat === 'png') {
                        mimeType = 'image/png';
                    }
                    
                    // 导出图片
                    const compressedDataUrl = canvas.toDataURL(mimeType, quality);
                    
                    // 计算压缩后的数据大小
                    const binaryString = atob(compressedDataUrl.split(',')[1]);
                    const len = binaryString.length;
                    const bytes = new Uint8Array(len);
                    for (let i = 0; i < len; i++) {
                        bytes[i] = binaryString.charCodeAt(i);
                    }
                    const compressedSize = new Blob([bytes]).size;
                    const compressedSizeKb = (compressedSize / 1024).toFixed(2);
                    
                    // 计算压缩率
                    const originalSize = dataUrl.length * 0.75; // 粗略估计
                    const compressionRatio = ((1 - compressedSize / originalSize) * 100).toFixed(1);
                    
                    resolve({
                        dataUrl: compressedDataUrl,
                        sizeKb: compressedSizeKb,
                        ratio: compressionRatio,
                        format: mimeType.split('/')[1]
                    });
                };
                img.src = dataUrl;
            });
        }
        
        // 下载压缩后的图片
        function downloadCompressedImage(dataUrl, originalFileName, format) {
            const link = document.createElement('a');
            const nameWithoutExt = originalFileName.split('.').slice(0, -1).join('.');
            link.download = `${nameWithoutExt}_compressed.${format}`;
            link.href = dataUrl;
            link.click();
        }
        
        // Markdown 转 HTML 功能
        function convertMarkdown() {
            const markdown = document.getElementById('markdown-input').value;
            let html = '';
            
            // 简单的 Markdown 解析（实际项目中可以使用更完善的库）
            // 标题
            html = markdown.replace(/^# (.*$)/gm, '<h1>$1</h1>');
            html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
            html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
            html = html.replace(/^#### (.*$)/gm, '<h4>$1</h4>');
            
            // 粗体和斜体
            html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
            html = html.replace(/__(.*?)__/g, '<strong>$1</strong>');
            html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
            html = html.replace(/_(.*?)_/g, '<em>$1</em>');
            
            // 链接
            html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>');
            
            // 代码块
            html = html.replace(/```([\s\S]*?)```/g, function(match, code) {
                return `<pre><code>${code.trim()}</code></pre>`;
            });
            
            // 行内代码
            html = html.replace(/`(.*?)`/g, '<code>$1</code>');
            
            // 列表
            html = html.replace(/^- (.*$)/gm, '<li>$1</li>');
            // 转换连续的 li 标签为 ul 列表
            html = html.replace(/<li>(.*?)<\/li>([\s\S]*?)<\/li>/g, function(match) {
                return match.replace(/^<li>/, '<ul><li>').replace(/<\/li>$/, '</li></ul>');
            });
            
            // 引用
            html = html.replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>');
            
            // 表格（简单实现）
            html = html.replace(/\|(.*)\|\n\|(.*)\|\n((?:\|.*\|\n)*)/g, function(match, headers, separators, rows) {
                let tableHtml = '<table border="1" cellpadding="5" cellspacing="0">';
                
                // 表头
                tableHtml += '<thead><tr>';
                headers.split('|').forEach(header => {
                    if (header.trim()) {
                        tableHtml += `<th>${header.trim()}</th>`;
                    }
                });
                tableHtml += '</tr></thead>';
                
                // 表体
                tableHtml += '<tbody>';
                rows.split('\n').forEach(row => {
                    if (row.trim()) {
                        tableHtml += '<tr>';
                        row.split('|').forEach(cell => {
                            if (cell.trim()) {
                                tableHtml += `<td>${cell.trim()}</td>`;
                            }
                        });
                        tableHtml += '</tr>';
                    }
                });
                tableHtml += '</tbody></table>';
                
                return tableHtml;
            });
            
            // 段落
            html = html.replace(/^(?!<h[1-6]>)(?!<ul>)(?!<ol>)(?!<li>)(?!<blockquote>)(?!<pre>)(.*$)/gm, function(match) {
                if (match.trim()) {
                    return `<p>${match.trim()}</p>`;
                }
                return match;
            });
            
            // 清理多余的空行
            html = html.replace(/\n{3,}/g, '\n\n');
            
            document.getElementById('html-output').value = html;
        }
        
        // 复制 HTML 输出
        function copyHtmlOutput() {
            const htmlOutput = document.getElementById('html-output');
            htmlOutput.select();
            document.execCommand('copy');
            showSuccess('HTML 内容已复制到剪贴板');
        }
        
        // 错误消息
        function showError(message) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message';
            errorDiv.textContent = message;
            
            // 插入到当前活动标签页的顶部
            const activeTab = document.querySelector('.tab-content.active');
            activeTab.insertBefore(errorDiv, activeTab.firstChild);
            
            // 3秒后自动移除
            setTimeout(() => {
                errorDiv.remove();
            }, 5000);
        }
        
        // 成功消息
        function showSuccess(message) {
            const successDiv = document.createElement('div');
            successDiv.className = 'success-message';
            successDiv.textContent = message;
            
            // 插入到当前活动标签页的顶部
            const activeTab = document.querySelector('.tab-content.active');
            activeTab.insertBefore(successDiv, activeTab.firstChild);
            
            // 3秒后自动移除
            setTimeout(() => {
                successDiv.remove();
            }, 3000);
        }
        
        // 初始化：自动转换示例 Markdown
        window.onload = function() {
            convertMarkdown();
        };
    </script>
</body>
</html>